<script setup lang="ts">
import { inject } from "vue";
import type { Ref } from "vue";
import type { GoodDetail } from "@/types/detailTypes/detailTypes.ts";

const goodDetail = inject<Ref<GoodDetail>>("goodDetail");

</script>

<template>
   <div class="message">
      <!-- 属性 -->
      <ul class="attrs">
         <li v-for="item in goodDetail.details.properties" :key="item.value">
            <span class="dt">{{item.name}}</span>
            <span class="dd">{{item.value}}</span>
         </li>
      </ul>
      <!-- 图片 -->
      <img v-for="item in goodDetail.details.pictures" :key="item" v-lazy="item">
   </div>
</template>

<style scoped lang="less">
.message {
   padding: 40px;
   .attrs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 30px;
      li {
         display: flex;
         margin-bottom: 10px;
         width: 50%;
         .dt {
            width: 80px;
            color: #999;
         }
         .dd {
            flex: 1;
            color: #666;
         }
      }
   }
   > img {
      width: 100%;
   }
}
</style>
